<template>
	<view class="wy-modal wy-position-relative">
		<uni-popup ref="alertDialog" :type="model.type" :animation="false" :isMaskClick="false" :style="boxStyle+dialogStyle">
            <view class="wy-flex-column wy-bg-page " :class="[boxClass,model.type=='center'?'wy-radius-base':'']" :style="boxStyle+dialogStyle">
                <slot name="title">
                    <view v-if="model.showTitle" class="wy-flex-row wy-ps-tb-base wy-justify-center wy-position-relative">
                        <text class="wy-size-l wy-text-bold wy-color-text">{{model.title}}</text>
                        <view class="wy-position-absolute wy-right-s" v-if="showClose">
                            <wy-icon name="close" size="l" type="error" @iconClicked="toCancel"></wy-icon>
                        </view>
                    </view>
                </slot>
                <scroll-view v-if="model.scroll" :scroll-y="true"  :class="screenSize=='small'?'wy-ps-tb-s wy-ps-lr-base':'wy-ps-tb-base wy-ps-lr-l'" :style="contentH">
                	<slot>
                        <text class="wy-size-base wy-color-text" v-if="model.content">{{model.content}}</text>
                    </slot>
                </scroll-view> 
                <template v-else>
                    <slot> 
                        <view class="wy-flex-row wy-flex-1 wy-ps-tb-s wy-ps-lr-base wy-justify-center">
                           <text class="wy-size-base wy-color-text">{{model.content}}</text>
                        </view>
                    </slot> 
                </template>
               
                <slot name="action">
                    <view v-if="model.showAction" class="wy-flex-row wy-ps-tb-base wy-ps-lr-s">
                        <view  v-if="model.showCancel" class="wy-flex-1 wy-flex-row wy-justify-center ">
                            <text @click="trigger('cancel')" :style="model.cancelColor!==true&&model.cancelColor!==true?'color:'+model.cancelColor+';':''"  :class="model.cancelColor===true?'wy-color-primary':''" class="wy-size-base">{{model.cancelText}}</text>
                        </view>
                        <view  class="wy-flex-1 wy-flex-row wy-justify-center ">
                            <text @click="trigger('confirm')" :style="model.confirmColor!==true&&model.confirmColor!==true?'color:'+model.confirmColor+';':''"  :class="model.confirmColor===true?'wy-color-primary':''" class="wy-size-base">{{model.confirmText}}</text>
                        </view>
                        <template v-for="(ac,index) in model.action">
                            <view v-if="ac.show" :key="index" class="wy-flex-1 wy-flex-row wy-justify-center ">
                                <text @click="trigger(ac.tap)" :style="ac.color!==true&&ac.color?'color:'+ac.color+';':''" :class="ac.color===true?'wy-color-primary':''" class="wy-size-base">{{ac.text}}</text>
                            </view>
                        </template> 
                        
                    </view>
                </slot>
                
            </view>
        </uni-popup> 
	</view>

</template>

<script> 
	import {wy,pubfn} from '../../libs/context.js'  
    var getHeight = pubfn.getHeight   
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
	export default {
	    components:{
	        uniPopup
	    },
		data() {
			return {
				actionCount:0,
				model:{ 
					width:'750rpx',
					dialogWidth:'600rpx',
					height:'750rpx',
					zIndex:1110,
					show:false,
					title:'提示',
					content:'',
					type:'center',
					scroll:false,
					showTitle:true,
					showAction:true,
					showClose:true,
					showCancel:true,
					cancelText:'取消',
					cancelColor:true,
					confirmText:'确定',
					confirmColor:false,
					success:(e)=>{
						console.log(e)
					},
					action:[],
					event:{
						confirm:(e)=>{
							this.hide()
							if(this.model.success){
								this.model.success({confirm:true})
							}
						},
						cancel:(e)=>{
							this.hide()
							if(this.model.success){
								this.model.success({cancel:true})
							}

						}
					},
					theme:{
						main:{
							dfclass:'',
							class:'',
							style:''
						}

					}
				} 
			}
		},
		props: { 
			boxStyle:{
				type:String,
				default:''
			},
            boxClass:{
                type:String,
                default:''
            },
			height:{
				type:String,
				default:''
			},
            showClose:{
                type:Boolean,
                default:true
            },
            scroll:{
                type:Boolean,
                default:false
            },
			screenSize:{
				type:String,
				default:'small'
			},
			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
			// message: 消息提示 ; dialog : 对话框
			type: {
				type: String,
				default: 'center'
			},
			zIndex:{
				type:Number,
				default:1110
			},
			showAction:{
				type:Boolean,
				default:true
			},
			showTitle:{
				type:Boolean,
				default:true
			}

		},
		created() { 
            this.dfAttr={}
			this.init()
		},
        computed:{
          dialogStyle(){
              let {width,type,zIndex,dialogWidth}=this.model
              return 'width:'+(type=='center'?dialogWidth:width)+';z-index:'+zIndex+';'
          },
          contentH(){
              let {height,scroll}=this.model
              return scroll?('height:'+ getHeight(height)+'px;'):''
          }
        },
		methods: {
			locale(key,iscontent=true,group='wyModal'){
				return wy.locale(key,iscontent,group)
			},
			init(){
                var obj={
                    height:this.height,
                    scroll:this.scroll,
					type:this.type,
					showClose:this.showClose,
					showAction:this.showAction,
					showTitle:this.showTitle
                }
                this.model=pubfn.deepMerge(this.model,obj) 
                this.dfAttr=pubfn.deepClone(this.model)
			},
			trigger(fun)
			{
				if(this.model.event.hasOwnProperty(fun)){
					this.model.event[fun]()
				}
			},
			showModal(obj,mode='yesno'){ 
				this.show(obj)
			},
			show(obj,mode='yesno') {
                this.model=pubfn.deepClone(this.dfAttr)
                var modeObj={}
                switch(mode){ 
                    case 'ok':
                    case 'yes':
                        modeObj={
                            showCancel:false,
                            confirmColor:true,
                            confirmText:mode=='ok'?'知道了':'确定'
                        } 
                        break
                    case 'yesno':
                        modeObj={
                            showCancel:true,
                            cancelColor:true,
                            confirmText:'确定',
                            cancelText:'取消'
                        } 
                        break 
                }
                
				if(obj){
                    obj=Object.assign(modeObj,obj)
					let {success}=obj
					if(!success){
						obj.success=function(res){}
					} 
					this.model=pubfn.deepMerge(this.model,obj)
				}
				let {showCancel,confirmColor}=this.model
				if(!showCancel&&!confirmColor){
					this.model.confirmColor=true
				} 
                this.$refs.alertDialog.open() 
			},
			toCancel(){
				this.hide()
				if(this.model.success){
					this.model.success({cancel:true})
				}
			},
			hide() {
				this.$refs.alertDialog.close()
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
